
<template>
  <div>
    <div id="myChart"
         ref="myChart"
         :style="{width: '100%', height: '180px'}"></div>
  </div>
</template>
<script>
import echarts from "echarts";
export default {
  props: {
    formData: {
      type: Array
    },
    time: {
      type: String
    }
  },
  data () {
    return {};
  },
  mounted () {
    this.drawLine();
  },
  watch: {
    formData: {
      handler (newVal, oldVal) {
        this.drawLine();
      },
      deep: true
    }
  },
  methods: {
    drawLine () {
      // 初始化echarts实例
      let myChart = this.$echarts.init(this.$refs.myChart);
      let xData = this.formData.map(item => {
        return item.date;
      });
      let yData1 = this.formData.map(item => {
        return item.callinCount;
      });
      let yData2 = this.formData.map(item => {
        return item.jtCount;
      });
      // 绘制图表
      myChart.setOption({
        title: {},
        tooltip: {
          showContent: true,
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985"
            }
          },
          formatter: params => {
            let str =
              params[0].axisValueLabel +
              "<br/>" +
              "呼入量" +
              params[0].value +
              "<br/>" +
              "接听量" +
              params[1].value
              //  +
              // "<br/>" +
              // "接听率" +
              // this.formData[params[0].dataIndex].callinPercent;
            this.$emit("chooseDate", this.formData[params[0].dataIndex].time);
            return str;
          }
        },
        legend: {
          data: []
        },
        toolbox: {
          feature: {}
        },
        grid: {
          left: "3%",
          right: "3%",
          bottom: "3%",
          top: "8%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: xData,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "rgba(115, 116, 141, 1)"
            }
          },
          axisLabel: {
            formatter: val => {
              if (this.time == "Y") {
                return val + "月";
              } else {
                return val
              }
            },
            // textStyle: {
            //   color: '#73748D'
            // }
          },
        },
        yAxis: {
          splitLine: { show: false },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "rgba(115, 116, 141, 1)"
            }
          },
          type: "value",
          splitLine: {
            //网格线
            lineStyle: {
              type: "dashed", //设置网格线类型 dotted：虚线   solid:实线
              color: ["#E0EFF9"]
            },
            show: true //隐藏或显示
          }
        },

        series: [
          {
            type: "line",
            // stack: "总量",
            // smooth: 0.3,
            areaStyle: {
              normal: {
                color: "rgba(92, 219, 211, .2)" //改变区域颜色
              }
            },
            itemStyle: {
              normal: {
                color: "#5CDBD3", //改变折线点的颜色
                lineStyle: {
                  color: "#5CDBD3" //改变折线颜色
                }
              }
            },
            data: yData1
          },
          {
            type: "line",
            // stack: "总量",
            // smooth: 0.3,
            areaStyle: {
              normal: {
                color: "rgba(126, 109, 245, .2)" //改变区域颜色
              }
            },
            itemStyle: {
              normal: {
                color: "#7E6DF5", //改变折线点的颜色
                lineStyle: {
                  color: "#7E6DF5" //改变折线颜色
                }
              }
            },
            data: yData2
          },
        ]
      });
    }
  }
};
</script>

<style scoped lang='less'>
.zhineng {
  background: #5cdbd3;
  width: 0.1rem;
  height: 0.1rem;
}
.zhuanren {
  background: #7e6df5;
  width: 0.1rem;
  height: 0.1rem;
}
p {
  font-size: 0.2rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #3d3d3d;
  margin-left: 0.1rem;
  /* float: left; */
}
</style>
